<template>
    <div class="login_box">
        <div class="login_title">審批流後台系統登錄</div>
        <div class="divline"></div>
        <div class="login_form">
            <div>
                <div style="margin-top: 30px;">
                    登錄賬號
                    <input @blur="accountBlur" v-model="login.UserAccount" autocomplete="off" data-val="true" data-val-required="請填寫賬號" id="UserAccount" name="UserAccount" placeholder="請輸入管理員賬號" type="text" value="" />
                    <div class="error_tip" v-show="accountEmpty">請填寫賬號</div>
                </div>
                </div>
                <div style="color:red;">
                    <span class="field-validation-valid" data-valmsg-for="UserAccount" data-valmsg-replace="true"></span>
                </div>
                <div style="margin-top: 30px;">
                    登錄密码
                    <input @blur="accountPwdBlur" v-model="login.PassWords" autocomplete="off" data-val="true" data-val-required="請填寫密碼" id="PassWords" name="PassWords" placeholder="請輸入管理員密碼" type="password" />
                    <div class="error_tip" v-show="pwdEmpty">請填寫賬號</div>
                </div>
                <div style="color:red;"><span class="field-validation-valid" data-valmsg-for="PassWords" data-valmsg-replace="true"></span></div>
                <div style="margin-top: 30px;">
                <button @click="loginSys">登 錄</button>
            </div>
        </div>
    </div>
</template>

<script>
// import $ from 'jquery'
import QS from 'qs'
export default {
  data () {
    return {
      accountEmpty: '',
      pwdEmpty: '',
      login: {
        UserAccount: '',
        PassWords: ''
      },
      textObj: {
        data: {
          Type: 1
        }
      }

    }
  },
  methods: {
    accountBlur () {
      if (this.login.UserAccount === '') {
        this.accountEmpty = true
      } else {
        this.accountEmpty = false
      }
    },
    accountPwdBlur () {
      if (this.login.PassWords === '') {
        this.pwdEmpty = true
      } else {
        this.pwdEmpty = false
      }
    },
    async loginSys () {
      this.accountBlur()
      this.accountPwdBlur()
      if (this.accountEmpty || this.pwdEmpty) {
        return
      }
      // console.log(this.login)
      const { data: res } = await this.$http.post('/Login/Login', QS.stringify(this.login))
      console.log('登录', res)
      sessionStorage.setItem('StaffInfo', JSON.stringify(res.data.StaffInfo))
      sessionStorage.setItem('UserRole', JSON.stringify(res.data.UserRole))
      if (res && res.IsSuccess) {
        this.$router.push('/LeaveApplication')
        this.$message.success('登录成功！')
      } else {
        this.$message.error('您的賬號無效或賬號密碼錯誤！')
      }
      // console.log('login')
    }
  }

}
</script>

<style lang="scss" scoped>
    .login_box{
        width: 400px;
        height: 280px;
        margin: 0px auto;
        background: #fff;
        position: relative;
        top: 260px;
        text-align: center;
        border-radius: 3px;
        opacity: 0.9;
        filter: alpha(opacity=90);
        border: solid;
        border-width: 1px;
        border-color: #bebfbe;
        .login_title{
            font-family: "微软雅黑";
            font-weight: 700;
            font-size: 16px;
            color: #3f3f3f;
            height: 50px;
            line-height: 50px;
            background-color: rgba(142, 47, 47, 0.1);
        }
        .divline{
            height: 2px;
            /* color: red; */
            background-color: #c55d5d;
        }
        input[type="text"],input[type="password"] {
            padding: 2px 3px;
        }
        button {
            width: 200px;
            height: 30px;
            border: 1px solid #0099cC;
            background: rgb(189, 88, 88);
            color: white;
            border-radius: 5px;
            text-align: center;
            letter-spacing: 5px;
            cursor:pointer;
        }
    }
    .error_tip {
      color: red;
    }
</style>
